<template>
	<uni-popup ref="popup" type="bottom">
		<view class="content">
			<view class="hd">
				<text>{{ serverData.titleType === '1' ? '所在行业' : '服务分类' }}</text>
				<icon class="iconfont icon" @click="close()">&#xe733;</icon>
			</view>
			<view class="bd">
				<view class="fLevel">
					<scroll-view scroll-y="true" class="scroll-view" show-scrollbar="true">
						<view
							class="scroll-view-item"
							v-for="(item, index) in serverData.listData"
							:class="serverData.selectFIndex === index ? 'active' : ''"
							:key="index"
							@click="selectFLevel(index, 2)"
						>
							{{ item.name }}
						</view>
					</scroll-view>
				</view>
				<view class="sLevel">
					<scroll-view scroll-y="true" class="scroll-view" show-scrollbar="true">
						<view
							class="scroll-view-item"
							:class="serverData.selectSId.includes(item.id+'') ? 'second-active' : ''"
							v-for="(item, index) in serverData.sLevelData"
							:key="index"
							@click="selectSLevel(item)"
						>
							<text>{{ item.name }}</text>
							<icon v-if="serverData.selectSId.includes(item.id+'') ? true : false" class="iconfont icon">&#xe718;</icon>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="list">
				<view class="title">已选：</view>
				<view class="item" v-for="(item, index) in serverData.selectSData" :key="index" @click="deleteSelectData(index)">
					<text class="text">{{ item.name }}</text>
					<icon class="iconfont icon">&#xe733;</icon>
				</view>
			</view>
			<view class="ft"><button class="btn btn-sub" hover-class="btnClickStyle" @click="pushSelectData">确定</button></view>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref, reactive } from 'vue';

const popup = ref(null);
const emits = defineEmits(['timeLayerCallback']);
const serverData = reactive({
	titleType: '',
	listData: [], //总数据
	sLevelData: [], //二级数据
	selectFIndex: 0, //选中的一级索引
	selectSId: [], //选中的二级数据ID
	selectSData: [], //选中的二级数据
	selectedData: [] //父级传过来的数据
});

defineExpose({
	open,
	close
});

function open(data, type, selectedData) {
	popup.value.open();
	serverData.titleType = type;
	serverData.selectedData = selectedData;
	getMaxClassList(data, serverData.selectedData);
}
function close() {
	popup.value.close();
}
function toastLayer(text) {
	uni.showToast({
		icon: 'none',
		title: text
	});
}
//获取服务行业总体数据
function getMaxClassList(data) {
	serverData.listData = data;
	if (serverData.selectedData.length) {
		//初始化定位数据
		for (let i in data) {
			if (data[i].id == serverData.selectedData[0].reid || data[i].id == serverData.selectedData[0].pid) {
				selectFLevel(+i, 1);
			}
		}
	} else {
		selectFLevel(0, 2);
	}
}
//选择一级获取二级数据
function selectFLevel(index, type) {
	serverData.selectSId = [];
	serverData.selectSData = [];
	serverData.selectFIndex = index;
	serverData.sLevelData = serverData.listData[index].children;
	if (type === 2) {
		serverData.selectSId.push(serverData.listData[index].children[0].id+'');
		serverData.selectSData.push(serverData.listData[index].children[0]);
	} else {
		serverData.selectSId = serverData.selectedData.map(item => {
			return item.id+'';
		});
		serverData.selectSData = serverData.selectedData;
	}
}
//选择二级数据
function selectSLevel(data) {
	let isDelete = serverData.selectSId.findIndex(item => item == data.id);
	if (serverData.selectSId.length === 3) {
		if (isDelete !== -1) {
			serverData.selectSId.splice(isDelete, 1);
			serverData.selectSData.splice(isDelete, 1);
		} else {
			toastLayer(serverData.titleType === '1' ? '最多选择三个服务行业' : '最多选择三个服务分类');
		}
		return;
	}
	if (isDelete !== -1) {
		serverData.selectSId.splice(isDelete, 1);
		serverData.selectSData.splice(isDelete, 1);
	} else {
		serverData.selectSId.push(data.id+'');
		serverData.selectSData.push(data);
	}
}
//底部删除二级选中数据
function deleteSelectData(index) {
	serverData.selectSId.splice(index, 1);
	serverData.selectSData.splice(index, 1);
}
//提交选中数据
function pushSelectData() {
	let data = serverData.selectSId.join(',');
	if (serverData.titleType === '1') {
		emits('tradeLayerCallback', { text: serverData.selectSData, id: data });
	} else {
		emits('typeLayerCallback', { text: serverData.selectSData, id: data });
	}
}
//回调
</script>

<style scoped lang="scss">
@import '@/common/css/base.scss';
.content {
	width: 100%;
	padding-bottom: 32rpx;
	border-radius: 16rpx;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background-color: #fff;
	.hd {
		@include flex(center, space-between);
		padding: 38rpx 26rpx;
		border-bottom: 1rpx solid #ddd;
		font-size: 36rpx;
		font-weight: bold;
		.icon {
			font-size: 36rpx;
			color: #666;
		}
	}
	.bd {
		@include flex(center, space-between);
		border-bottom: 1px solid #eee;
		.scroll-view {
			height: 700rpx;
		}
		.active {
			background: #fff5e5;
			color: #e1835b !important;
		}
		.second-active {
			color: #e1835b !important;
		}
		.fLevel {
			width: 45%;
			border-right: 1px solid #eee;
			.scroll-view-item {
				border: 0;
				padding: 20rpx 30rpx;
			}
		}
		.sLevel {
			width: 55%;
			.scroll-view-item {
				padding: 20rpx 30rpx;
				@include flex(center, space-between);
			}
		}
		.scroll-view-item {
			font-size: 28rpx;
			color: #333;
			border-bottom: 1rpx solid #eee;
		}
	}
	.list {
		margin: 0 auto;
		padding: 18rpx 0;
		width: 695rpx;
		font-size: 24rpx;
		.title {
			display: inline-block;
			height: 56rpx;
			line-height: 56rpx;
		}
		.item {
			display: inline-block;
			padding: 0 8rpx;
			margin: 0 5rpx 10rpx 5rpx;
			color: #666;
			background: #f5f5f5;
			border-radius: 28rpx;
			.text {
				display: inline-block;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 24rpx;
				border-radius: 28rpx;
			}
			.icon {
				display: inline-block;
				margin-left: 6rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 24rpx;
			}
		}
	}
	.btn-sub {
		width: 695rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		background: #e1835b;
		border-radius: 40rpx;
	}
}
</style>
